var uploader = new plupload.Uploader({
        runtimes : 'gears,html5,html4,silverlight,flash',
		browse_button : 'pickfiles',
        chunk_size : '30MB',//分块大小，小于这个大小的不分块
        unique_names : true,//生成唯一文件名
		url : site.interUrl+'/pluploadUpload',
		//container: document.getElementById('container'),
       /* resize : { width : 320, height : 240, quality : 90 },// 缩放图片*/
        multi_selection: false, //true:ctrl多文件上传, false 单文件上传 
		//允许上传的文件类型        
		filters : {
            max_file_size: "1024MB",//最大上传文件大小（格式100b, 10kb, 10mb, 1gb） 
            mime_types: [
                {title : "Document files", extensions : "mp4"}
            ]
        },
 
		flash_swf_url : site.gateUrl+'/js/plupload/js/Moxie.swf',
		silverlight_xap_url : site.gateUrl+'/js/plupload/js/Moxie.xap',
         
        preinit : {
            Init: function(up, info) {
                //console.log("初始化完毕");
            },
 
            UploadFile: function(up, file) {
                
            }
        },
        init : {
			PostInit: function() {
				console.log("初始化视频组件完毕");
				document.getElementById('uploadfiles').onclick = function() {
					$("#uploadProgress").removeClass("hide");
					$("#save-btn-merchantProducts").addClass("hide");
					uploader.start();
					return false;
				};
			},

			Browse: function(up) {
              
            },

            Refresh: function(up) {
              
            },
 
            StateChanged: function(up) {
     
                
            },
 
            QueueChanged: function(up) {
               
               
            },

			OptionChanged: function(up, name, value, oldValue) {
				
			
			},

			BeforeUpload: function(up, file) {
				console.log("开始上传");
			},
 
            UploadProgress: function(up, file) { //上传中，显示进度条 
				//console.log(file.percent);
                $("#uploadProgress").removeClass("hide");
				drawAudio((file.percent)*2.5);
				//res = setInterval(draw, file.percent);
				//console.log("进度：[百分比:" + file.percent + "，状态：" + file.status + ",原始大小：" + file.origSize + ",已传：" + file.loaded + "]");
                //progress(file.id, file.percent);
            },

			FileFiltered: function(up, file) {
				
               
			},
 
            FilesAdded: function(up, files) {//当文件添加到上传队列后触发
				var size = files[0].size;
				$(".be_uploaded").remove();
				if(size > 1024*1024*1024){
					ly.toast("最大上传1G文件");
				}else{
					$("#pickfiles").after("<span class='be_uploaded'>&nbsp;&nbsp;&nbsp;<span class='view'>"+files[0].name+"</span></span>");
					$("#uploadfiles").removeAttr('disabled');
				}
				
            },
 
            FilesRemoved: function(up, files) {
                // Called when files are removed from queue
                log('[FilesRemoved]');
 
                plupload.each(files, function(file) {
                   
                });
            },
 
            FileUploaded: function(up, file, info) {//文件上传完毕触发
                // Called when file has finished uploading
               console.log(info.response);
			   $("#save-btn-merchantProducts").removeClass("hide");
				if(info.status == 200){
					var tmp = eval('(' + info.response + ')');
					$("#videoFileId").val(tmp.result);
					$("#fileUploaded").removeClass("hide");
					$("#uploadfiles").attr('disabled','disabled');
				}
            },
 
            ChunkUploaded: function(up, file, info) {
				console.log(info);
                console.log("小片上传完成后");
            },

			UploadComplete: function(up, files) {//所有文件上传完毕
				 //alert("上传完毕");
				 $("#UploadProgress").append("<span>上传完毕</span>")
			},

			Destroy: function(up) {
				// Called when uploader is destroyed
                log('[Destroy] ');
			},
 
            Error: function(up, args) {
                // Called when error occurs
                log('[Error] ', args);
            }
        }
    });
	uploader.init();



   		var i = 0;
        var res = 0;
        var context = null;
        var total_width = 250;
        var total_height = 20;
        var initial_x = 5;
        var initial_y = 5;
        var radius = total_height/2;
        window.onload = function() {
            var elem = document.getElementById('myCanvas');
            if (!elem || !elem.getContext) {
                return;
            }

            context = elem.getContext('2d');
            if (!context) {
                return;
            }

            // set font
            context.font = "8px Verdana";

            // Blue gradient for progress bar
            var progress_lingrad = context.createLinearGradient(0,initial_y+total_height,0,0);
            progress_lingrad.addColorStop(0, '#4DA4F3');
            progress_lingrad.addColorStop(0.4, '#ADD9FF');
            progress_lingrad.addColorStop(1, '#9ED1FF');
            context.fillStyle = progress_lingrad;
            //draw();
            //res = setInterval(draw, 50);
        }

        function drawAudio(percent) {
            context.clearRect(initial_x-5,initial_y-5,total_width+15,total_height+15);
            progressLayerRect(context, initial_x, initial_y, total_width, total_height, radius);
            progressBarRect(context, initial_x, initial_y, percent, total_height, radius, total_width);
            progressText(context, initial_x, initial_y, percent, total_height, radius, total_width );
            if (percent>=total_width) {
                //clearInterval(res);
                return false;
            }
        }

        /**
         * Draws a rounded rectangle.
         * @param {CanvasContext} ctx
         * @param {Number} x The top left x coordinate
         * @param {Number} y The top left y coordinate
         * @param {Number} width The width of the rectangle
         * @param {Number} height The height of the rectangle
         * @param {Number} radius The corner radius;
         */
        function roundRect(ctx, x, y, width, height, radius) {
            ctx.beginPath();
            ctx.moveTo(x + radius, y);
            ctx.lineTo(x + width - radius, y);
            ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false);
            ctx.lineTo(x + radius, y + height);
            ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);
            ctx.closePath();
            ctx.fill();
        }

        /**
         * Draws a rounded rectangle.
         * @param {CanvasContext} ctx
         * @param {Number} x The top left x coordinate
         * @param {Number} y The top left y coordinate
         * @param {Number} width The width of the rectangle
         * @param {Number} height The height of the rectangle
         * @param {Number} radius The corner radius;
         */
        function roundInsetRect(ctx, x, y, width, height, radius) {
            ctx.beginPath();
            // Draw huge anti-clockwise box
            ctx.moveTo(1000, 1000);
            ctx.lineTo(1000, -1000);
            ctx.lineTo(-1000, -1000);
            ctx.lineTo(-1000, 1000);
            ctx.lineTo(1000, 1000);
            ctx.moveTo(x + radius, y);
            ctx.lineTo(x + width - radius, y);
            ctx.arc(x+width-radius, y+radius, radius, -Math.PI/2, Math.PI/2, false);
            ctx.lineTo(x + radius, y + height);
            ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);
            ctx.closePath();
            ctx.fill();
        }

        function progressLayerRect(ctx, x, y, width, height, radius) {
            ctx.save();
            // Set shadows to make some depth
            ctx.shadowOffsetX = 2;
            ctx.shadowOffsetY = 2;
            ctx.shadowBlur = 5;
            ctx.shadowColor = '#666';

             // Create initial grey layer
            ctx.fillStyle = 'rgba(189,189,189,1)';
            roundRect(ctx, x, y, width, height, radius);

            // Overlay with gradient
            ctx.shadowColor = 'rgba(0,0,0,0)'
            var lingrad = ctx.createLinearGradient(0,y+height,0,0);
            lingrad.addColorStop(0, 'rgba(255,255,255, 0.1)');
            lingrad.addColorStop(0.4, 'rgba(255,255,255, 0.7)');
            lingrad.addColorStop(1, 'rgba(255,255,255,0.4)');
            ctx.fillStyle = lingrad;
            roundRect(ctx, x, y, width, height, radius);

            ctx.fillStyle = 'white';
            //roundInsetRect(ctx, x, y, width, height, radius);

            ctx.restore();
        }

        /**
         * Draws a half-rounded progress bar to properly fill rounded under-layer
         * @param {CanvasContext} ctx
         * @param {Number} x The top left x coordinate
         * @param {Number} y The top left y coordinate
         * @param {Number} width The width of the bar
         * @param {Number} height The height of the bar
         * @param {Number} radius The corner radius;
         * @param {Number} max The under-layer total width;
         */
        function progressBarRect(ctx, x, y, width, height, radius, max) {
            // var to store offset for proper filling when inside rounded area
            var offset = 0;
            ctx.beginPath();
            if (width<radius) {
                offset = radius - Math.sqrt(Math.pow(radius,2)-Math.pow((radius-width),2));
                ctx.moveTo(x + width, y+offset);
                ctx.lineTo(x + width, y+height-offset);
                ctx.arc(x + radius, y + radius, radius, Math.PI - Math.acos((radius - width) / radius), Math.PI + Math.acos((radius - width) / radius), false);
            }
            else if (width+radius>max) {
                offset = radius - Math.sqrt(Math.pow(radius,2)-Math.pow((radius - (max-width)),2));
                ctx.moveTo(x + radius, y);
                ctx.lineTo(x + width, y);
                ctx.arc(x+max-radius, y + radius, radius, -Math.PI/2, -Math.acos((radius - (max-width)) / radius), false);
                ctx.lineTo(x + width, y+height-offset);
                ctx.arc(x+max-radius, y + radius, radius, Math.acos((radius - (max-width)) / radius), Math.PI/2, false);
                ctx.lineTo(x + radius, y + height);
                ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);
            }
            else {
                ctx.moveTo(x + radius, y);
                ctx.lineTo(x + width, y);
                ctx.lineTo(x + width, y + height);
                ctx.lineTo(x + radius, y + height);
                ctx.arc(x+radius, y+radius, radius, Math.PI/2, 3*Math.PI/2, false);
            }
            ctx.closePath();
            ctx.fill();

            // draw progress bar right border shadow
            if (width<max-1) {
                ctx.save();
                ctx.shadowOffsetX = 1;
                ctx.shadowBlur = 1;
                ctx.shadowColor = '#666';
                if (width+radius>max)
                  offset = offset+1;
                ctx.fillRect(x+width,y+offset,1,total_height-offset*2);
                ctx.restore();
            }
        }

        /**
         * Draws properly-positioned progress bar percent text
         * @param {CanvasContext} ctx
         * @param {Number} x The top left x coordinate
         * @param {Number} y The top left y coordinate
         * @param {Number} width The width of the bar
         * @param {Number} height The height of the bar
         * @param {Number} radius The corner radius;
         * @param {Number} max The under-layer total width;
         */
        function progressText(ctx, x, y, width, height, radius, max) {
            ctx.save();
            ctx.fillStyle = 'white';
            var text = Math.floor(width/max*100)+"%";
            var text_width = ctx.measureText(text).width;
            var text_x = x+width-text_width-radius/2;
            if (width<=radius+text_width) {
                text_x = x+radius/2;
            }
            ctx.fillText(text, text_x, y+22);
            ctx.restore();
        }
